<template>
  <el-menu-item index="3" @click="monitor(3)">视频监控</el-menu-item>

  <!-- popup 弹窗 -->
  <div id="popup" v-show="feature" :style="{ top: clientY, left: clientX }">
    <video
      src="../../video/roadvideo.mp4"
      controls="controls"
      autoplay
      muted
    ></video>
    <button id="close" @click="popuShow()">关闭</button>
  </div>
</template>

<script setup>
const map = ref()

onMounted(() => {
  //初始化地图
  map.value = useGlobalMap()
})

var position = ref()
const layerId = ref()
function monitor(index) {
  //  index 图层id
  layerId.value = index
  // 点击事件
  map.value.on('click', handleMap)
}
// 关闭popup弹窗
function popuShow() {
  //移除点击事件
  map.value.un('click', handleMap)
  feature.value = ''
  update.value = ''
}
// 点击事件回调函数
function handleMap(e) {
  position.value = e.coordinate

  // 调用封装点查询
  Point.query({
    position: position.value,
    service: {
      name: 'guanggu',
      layerId: layerId.value,
    },
    callback: onSuccess,
  })
}

// popup弹窗
const clientX = ref()
const clientY = ref()
var feature = ref()
var update = ref()

function onSuccess(res) {
  // 判断是否有监控点，如果有popup弹窗
  if (res) {
    var arr = res[0].values_.values_

    feature.value = { id: arr.ID, number: arr.编号, address: arr.位置 }

    // 经纬度坐标转屏幕坐标
    var lnglat = map.value.getPixelFromCoordinate(position.value)

    clientX.value = lnglat[0] + 'px'
    clientY.value = lnglat[1] + 'px'
  }
}
</script>

<style scoped>
#popup {
  /* width: 200px; */
  /* height: 50px; */
  position: fixed;
  border: 1px solid #333;
  box-shadow: 0 0 3px 3px 2px #333;
  z-index: 1000;
  background-color: #fff;
}
#popup video {
  float: left;
  width: 200px;
}
#popup #close {
  position: absolute;
  right: 2px;
  top: 2px;
}
</style>
